import React from "react";
import Header from "./component/Header";
import "./style/style.less";
import { apiGetStoreChart } from '@/request/dataStatics'
import BarChart from "./component/BarChart";
import _ from 'lodash'

class Stores extends React.Component {
  state = {
    yData: [],
    xData: [],
    searchValue: {
      type: 'day'
    }
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    this.setState({
      xData: [],
      yData: []
    })
    const { searchValue } = this.state
    let res = await apiGetStoreChart({ ...searchValue })
    if (res.data && res.code === 0) {
      let xData = _.keys(res.data.bar)
      let yData = _.values(res.data.bar).map(v => {
        return v.count
      })
      this.setState({
        xData,
        yData
      })
    }
  }
  getTime = (type, createStartTime, createEndTime) => {
    if (type === 'condition') {
      this.setState({
        searchValue: {
          type: 'condition',
          createStartTime,
          createEndTime
        }
      }, () => this.getData())
    } else {
      this.setState({
        searchValue: {
          type
        }
      }, () => this.getData())
    }
  };
  render() {
    const { xData, yData } = this.state
    return (
      <div className="p-layout-box">
        <Header getTime={this.getTime} />
        <div className="p-layout-content">
          <div className="chart-box">
            {!_.isEmpty(xData) && !_.isEmpty(yData) && <BarChart name="门店入驻" xData={xData} yData={yData} />}
          </div>
        </div>
      </div>
    );
  }
}

export default Stores;